<template>
	<div>
		<el-select
			ref="sgoods"
		    style="width: 400px;"
		    @change="changeSelect"
		    size="mini"
		    v-model="goods_name"
			:disabled="!!order_number || is_disabld==1"
		    filterable
		    remote
		    reserve-keyword
		    placeholder="请输入商品名称"
		    :remote-method="remoteMethod"
		    :loading="loading">
		    <el-option
		      v-for="item in options"
		      :key="item.goods_id"
		      :label="item.goods_name"
		      :value="item.goods_name">
		    </el-option>
		  </el-select>
		<!-- <el-input @change="remoteMethod" 
			ref="sgoods"
			style="width: 400px;"
			size="mini"
			@keyup.enter.native="remoteMethod"
			 v-model="goods_name"
			 :disabled="!!order_number || is_disabld==1"
			 placeholder="请输入商品名称"
			></el-input> -->
		<!-- <el-dialog
		  :close-on-click-modal="false"
		  :visible.sync="isShow"
		  width="700px">
		  <el-table  :data="options" border>
			<el-table-column   align="center"  width="80"
				label="序号">
				<template slot-scope="scope">
				   <div>
						{{scope.$index+1}}
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  
				label="商品名称">
				<template slot-scope="scope">
				   <div>
						{{scope.row.goods_name}}
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="100px"   label="操作">
				<template slot-scope="scope">
				   <div class="button_text" @click="conGoods(scope.row)">
						选择
				   </div>
				</template>
			</el-table-column>
		  </el-table>
		</el-dialog> -->
		
	</div>
</template>

<script>
	export default {
		data(){
			return {
				 loading: false,
				 options:[],
				 goods_name:"",
				 rowIndex:0,
				 brand:"",
				 goods_type:"",
				 number_length:undefined,
				 is_disabld:0, // 0 不禁用 1禁用
				 isShow:false
			}
		},
		props:{
			scopeData:{
				type:Object,
				default:{}
			},
			order_number:{
				type:String,
				default:''
			}
		},
		watch:{
			// goods_name(newVal){
			// 	let obj = {
			// 		rowIndex:this.rowIndex,
			// 		goods_name:this.goods_name,
			// 		brand:this.brand,
			// 		goods_type:this.goods_type
			// 	}
			// 	this.$emit('getGoodsName',obj)
			// }
			// scopeData(newVal){
			// 	this.rowIndex = this.scopeData.$index
			// 	setTimeout(()=>{
			// 		this.goods_name = this.scopeData.row.goods_name
			// 	},500)
			// }
		},
		mounted() {
			if(this.scopeData.row){
				this.rowIndex = this.scopeData.$index
				this.goods_name = this.scopeData.row.goods_name
				this.is_disabld = this.scopeData.row.is_disabld
			}
		},
		methods:{
			focusinput(){
				this.$refs.sgoods.focus()
			},
			changeSelect(val){
				for(let i in this.options){
					if(this.options[i].goods_name == val){
						this.goods_type = this.options[i].goods_type
						this.brand = this.options[i].brand
						this.goods_name = this.options[i].goods_name,
						this.number_length = this.options[i].number_length
					}
				}
				
				let obj = {
					rowIndex:this.rowIndex,
					goods_name:this.goods_name,
					brand:this.brand,
					goods_type:this.goods_type,
					number_length:this.number_length
				}
				this.$emit('getGoodsData',obj)
			},
			conGoods(row){
				let obj = {
					rowIndex:this.rowIndex,
					goods_name:row.goods_name,
					brand:row.brand,
					goods_type:row.goods_type,
					number_length:row.number_length
				}
				this.goods_name=row.goods_name
				this.brand=row.brand
				this.number_length=row.number_length
				this.goods_type=row.goods_type
				
				this.isShow = false
				this.$refs.sgoods.blur()
				this.$emit('getGoodsData',obj)
			},
			remoteMethod(keywords) {
				if (keywords !== '') {
					this.loading = true
				  this.$post('/goods/searchGoods',{keywords},res=>{
					  this.loading = false
					  let result = res.data.data
					  if(result.length==1){
						  this.goods_name = result[0].goods_name
						  this.brand = result[0].brand
						  this.goods_type = result[0].goods_type
						  this.number_length = result[0].number_length
						  let obj = {
						  	rowIndex:this.rowIndex,
						  	goods_name:this.goods_name,
						  	brand:this.brand,
						  	goods_type:this.goods_type,
							number_length:this.number_length
						  }
						  this.$refs.sgoods.blur()
						  this.$emit('getGoodsData',obj)
					  }
					  this.options = res.data.data
				  })
				} else {
				  this.options = [];
				}
		  }
		}
	}
</script>


